import React, { useState } from 'react'
import { Row, Col, Input, Button, InputNumber, Select } from 'antd'
import FormItem from '../../../../components/FormItem';
import { OPERATOR } from '../../../../utils/constant';

export default function Item(props) {
  const { value, index, length } = props

  const [ rightDisabled, setRightDisabled ] = useState(false)

  const onChange = (type, data) => {
    props.onChange(index, type, data)
  }

  const operatorChange = (data) => {
    props.onChange(index, 'sign', data)
    const sign = props.form.getFieldValue('sign' + value.id)
    const cur = props.operator.find(item => item.operator_id === sign)
    if (cur && cur.type === OPERATOR._NO_RIGHT) {
      setRightDisabled(true)
      props.onChange(index, 'right', null)
      const key = 'right' + value.id
      props.form.setFieldsValue({
        [key]: null
      })
    } else {
      setRightDisabled(false)
    }
  }

  const formItems = [
    {
      name: 'left' + value.id,
      options: {
        initialValue: value.left,
        rules: [
          { required: true, message: '请输入条件字段所在列' },
        ],
      },
      component: (
        <InputNumber min={0} max={999} precision={0} disabled={props.actionType === 'detail'} onChange={(value) => onChange('left', value)} />
      ),
    },
    {
      name: 'sign' + value.id,
      options: {
        initialValue: value.sign,
        rules: [
          { required: true, message: '请选择' },
        ],
      },
      component: (
        <Select
          placeholder='请选择'
          disabled={props.actionType === 'detail'}
          onSelect={operatorChange.bind(this)}
        >
          {props.operator.map((it) => {
            return (
              <Select.Option value={it.operator_id} key={it.operator_id}>
                {it.symbol}
              </Select.Option>
            );
          })}
        </Select>
      ),
    },
    {
      name: 'right' + value.id,
      options: {
        initialValue: value.right,
        rules: [
          { required: rightDisabled ? false : true, message: '请输入' },
          { pattern: /^'[\S\s]*'$/, message: '必须以单引号包裹内容' },
        ],
      },
      component: (
        <Input disabled={props.actionType === 'detail' || rightDisabled} onChange={(e) => onChange('right', e.target.value)} />
      ),
    },
  ]

  const del = () => {
    props.del(index)
  }

  const move = (step) => {
    props.move(index, step)
  }

  return (
    <Row gutter={10}>
      <Col span={2}>{index + 1}</Col>
      {formItems.map((item) => {
        return (
          <Col span={6} key={item.name}>
            <FormItem form={props.form} item={item} />
          </Col>
        );
      })}
      <Col span={4}>
        <Button type="link" disabled={props.actionType === 'detail'} onClick={del.bind(this)}>删除</Button>
        <Button type="link" disabled={props.actionType === 'detail' || index === 0} onClick={move.bind(this, 'up')}>上移</Button>
        <Button type="link" disabled={props.actionType === 'detail' | index === length - 1} onClick={move.bind(this, 'down')}>下移</Button>
      </Col>
    </Row>
  )
} 